<template>
	<view>
		<!-- 顶部订单状态 -->
		<scroll-view class="head" scroll-x="true">
			<view v-for="item in class_list" :key="item.id" :data-id="item.id" @click="getId"
				:class="item.isActive?'isActive':'isActive2'">{{item.name}}</view>
		</scroll-view>

		<!-- 占位 -->
		<view style="height: 10vw;"></view>
		<!-- 商品列表 -->
		<view class="goodsList">
			<!-- 商品 -->
			<view class="goods" v-for="item in orderList" :key="item.id">
				<image class="goods-img" :src="item.src"></image>
				<view class="goods-name">{{item.name}}</view>
				<view class="goods-other">
					<view class="goods-price">
						<text class="goods-price-text1">{{item.price}}</text>
						<text class="goods-price-text2">元</text>
					</view>
					<view class="goods-icons" :data-id='item.id' @click="gouwuche">
						<image src="../../static/shop_detail_imgs/购物车.png"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 结算 -->
		<view class="count" v-if="totalprice<200">
			<view class="count-left">
				<image class="count-left-img" src="../../static/shop_detail_imgs/购物车.png"></image>
				<view class="count-left-text" v-if="totalprice==0">购物车是空的哦~</view>
				<view class="count-left-text" v-if="totalprice!=0">共{{totalprice}}元</view>
			</view>
			<view class="count-right">200元起送</view>
		</view>
		<view class="count" v-if="totalprice>=200">
			<view class="count-left2">
				<view class="count-left-img2">
					<image src="../../static/shop_detail_imgs/购物车.png"></image>
				</view>
				<view class="count-left-text">共{{totalprice}}元</view>
			</view>
			<view class="count-right2" v-if="totalprice!=0">去结算</view>
		</view>
		<!-- 占位 -->
		<view style="height: 10vw;"></view>
	</view>
</template>

<script>
	var orderList = getApp().globalData.orderList
	export default {
		data() {
			return {
				class_list: [{
						id: 1,
						name: '蔬菜类',
						isActive: false
					},
					{
						id: 2,
						name: '水果类',
						isActive: false
					},
					{
						id: 3,
						name: '海鲜类',
						isActive: false
					},
					{
						id: 4,
						name: '海贝类',
						isActive: false
					},
					{
						id: 5,
						name: '家禽类',
						isActive: false
					},
					{
						id: 6,
						name: '鸡鸭肉类',
						isActive: false
					},
					{
						id: 7,
						name: '熟食类',
						isActive: false
					},
					{
						id: 8,
						name: '豆制品',
						isActive: false
					}
				],
				class_list_show_all: false,
				temp_class_list: [],
				couponList: [],
				shopid: null,
				orderList: [],
				totalprice: 0
			}
		},
		methods: {
			getId(e) {
				this.orderList = []
				let id = e.currentTarget.dataset.id
				let shopid = this.shopid
				this.class_list.forEach((v, i) => i == id - 1 ? v.isActive = true : v.isActive = false);
				orderList.forEach(item => item.shopid == shopid && item.categoryId == id ? this.orderList.push(item) : '')
			console.log(getApp().globalData.orderList)
			},
			gouwuche(e) {
				let id = e.currentTarget.dataset.id
				this.orderList.forEach(v => v.id == id ? this.totalprice += v.price : '');
				this.orderList.forEach(v => v.id == id ? v.num += 1 : '');
			}
		},
		onLoad(options) {
			let categoryId = options.index + 1
			this.shopid = options.shopid
			orderList.forEach(item => item.shopid == this.shopid && item.categoryId == categoryId ? this.orderList.push(
				item) : '')
			this.class_list[options.index].isActive = true
		},
		onShow(){
			this.totalprice=0
			orderList.forEach(item => item.num!=0 ? this.totalprice+=item.price*item.num : '')
		}
	}
</script>

<style>
	page {
		background-color: rgb(246, 246, 246);
	}

	.head {
		white-space: nowrap;
		width: 100vw;
		height: 10vw;
		display: flex;
		position: fixed;
		font-size: 3.5vw;
		border-bottom: 1px solid #00000030;
		background-color: #fff;
		z-index: 10;
		text-align: center;
		line-height: 10vw;
		font-weight: 550;
	}

	.isActive {
		display: inline-block;
		color: #927cff;
		width: 20vw;
		height: 10vw;
	}

	.isActive2 {
		display: inline-block;
		width: 20vw;
		height: 10vw;
	}

	.goodsList {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.goods {
		background-color: #fff;
		width: 46vw;
		border-radius: 3vw;
		margin: 2vw;
	}

	.goods-img {
		width: 45vw;
		height: 45vw;
		border-radius: 3vw;
	}

	.goods-name {
		font-size: 3vw;
		width: 44vw;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		padding: 0 2vw;
	}

	.goods-other {
		display: flex;
		margin: 2vw 2vw;
		justify-content: space-between;
		align-items: center;
	}

	.goods-price {}

	.goods-price-text1 {
		font-size: 4vw;
	}

	.goods-price-text2 {
		font-size: 3vw;
	}

	.goods-icons image {
		width: 5vw;
		height: 5vw;
	}

	.count {
		position: fixed;
		display: flex;
		bottom: 0;
		height: 10vw;
		background-color: #fff;
	}

	.count-left {
		display: flex;
		width: 70vw;
		align-items: center;
		justify-content: center;
	}

	.count-left-img {
		width: 5vw;
		height: 5vw;
		margin-right: 4vw;
		position: absolute;
		left: 3vw;
	}

	.count-left-text {
		font-size: 3.5vw;
	}

	.count-right {
		text-align: center;
		font-size: 4vw;
		width: 30vw;
		background-color: #808080;
		color: #fff;
		line-height: 10vw;
	}

	.count-left-img2 {
		background-color: #fff;
		border-radius: 90%;
		width: 11vw;
		height: 11vw;
		position: absolute;
		bottom: 2.5vw;
		left: 5vw;
		box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.3);
		z-index: 3;
	}

	.count-left-img2 image {
		margin: 2vw;
		width: 7vw;
		height: 7vw;
		background-color: #fff;
		border-radius: 90%;
	}

	.count-left2 {
		display: flex;
		width: 70vw;
		align-items: center;
		justify-content: flex-end;
		margin: 0 3vw 0 0;
	}

	.count-right2 {
		text-align: center;
		font-size: 4vw;
		width: 30vw;
		background-color: #FE0302;
		color: #fff;
		line-height: 10vw;
	}
</style>
